import React from 'react';
import PageTile from 'component/page-title/index.jsx';
import './index.scss';
//引入通用列表组件
import TableList from 'tool/table-list/index.jsx';
import OrderService from  'service/order-service.jsx';
import Tool from  'tool/tool.jsx';
const _order = new OrderService();
const _req = new Tool();


//商品编辑组件
class OrderDetail extends React.Component{
  constructor(props){
    super(props);
    this.state={
      orderNo: (this.props.location.state || {} ).pid, //获取路径参数
      orderInfo: {},     
    };
    this.loadOrderDtail = this.loadOrderDtail.bind(this);
  }
  componentDidMount(){
     this.loadOrderDtail();
  }
  loadOrderDtail(){
    //id存在，表明是商品编辑请求,需要进行表单回填
   if(this.state.orderNo){
     //去请求商品详情接口
     _order.getOrderDetail(this.state.orderNo).then(res=>{
       //请求成功
        this.setState({
          orderInfo: res
        });
     },errMsg=>{
      _req.errorTips(errMsg);
     });
   }  
  }
 render(){
  let tableHeaders=[
    {name:'商品图片', width:'10%'},
    {name:'商品信息', width:'60%'},
    {name:'单价', width:'10%'},
    {name:'数量', width:'10%'},
    {name:'合计', width:'10%'}
  ];
   let   receiver    = this.state.orderInfo.shippingVo || {},
        productList = this.state.orderInfo.orderItemVoList || [];
      return(
        <div id="page-wrapper">
          <PageTile title='订单详情'/>
          <div className="row">
              <div className="col-md-12">
                <div className="form-horizontal">
                  <div className="form-group">
                        <label className="col-md-2 control-label">订单号</label>
                        <div className="col-md-5">
                          <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
                        </div>
                  </div>
                  <div className="form-group">
                      <label className="col-md-2 control-label">创建时间</label>
                      <div className="col-md-5">
                        <p className="form-control-static">{this.state.orderInfo.createTime}</p>
                      </div>
                  </div>
                  <div className="form-group">
                      <label className="col-md-2 control-label">收件人</label>
                      <div className="col-md-5">
                        <p className="form-control-static">
                          {receiver.receiverName}
                          {receiver.receiverProvince}
                          {receiver.receiverCity}
                          {receiver.receiverAddress}
                          {receiver.receiverMobile || receiver.receiverPhone }          
                        </p>
                      </div>
                  </div>
                  <div className="form-group">
                      <label className="col-md-2 control-label">订单状态</label>
                      <div className="col-md-5">
                         <p className="form-control-static">{this.state.orderInfo.statusDesc}</p>
                      </div>
                  </div>
                  <div className="form-group">
                      <label className="col-md-2 control-label">支付方式</label>
                      <div className="col-md-5">
                          <p className="form-control-static">{this.state.orderInfo.paymentTypeDesc}</p>
                      </div>
                  </div>
                  <div className="form-group">
                      <label className="col-md-2 control-label">订单金额</label>
                      <div className="col-md-5">
                          <p className="form-control-static">￥{this.state.orderInfo.payment}</p>
                      </div>
                  </div>
               </div>
              </div>
              <div className="col-md-12">
              <TableList tableHeaders={tableHeaders}>
                {
                  productList.map((product,index)=>
                           (
                              <tr key={index}>
                                  <td className="product-img">
                                    <img src={`${this.state.orderInfo.imageHost}${product.productImage}`} />
                                  </td>
                                  <td>{product.productName}</td>
                                  <td>￥{product.currentUnitPrice}</td>
                                  <td>{product.quantity}</td>
                                  <td>{product.totalPrice}</td>
                              </tr>
                            )
                         )
                }
              </TableList>
              </div>
          </div>
       </div> 
      )
    }
  }
export default OrderDetail;

